<template>
	<view class="register">
	
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput
						v-model="username"
						type="text"
						maxlength="11"
						placeholder="手机号"
					></wInput>
					<wInput
						v-model="password"
						type="password"
						maxlength="11"
						placeholder="登录密码"
						isShowPass
					></wInput>
					<wInput
						v-model="verification_code"
						type="number"
						maxlength="6"
						placeholder="验证码"
						
						isShowCode
						ref="runCode"
						@setCode="getsmscode()"
					></wInput>
					
				</view>
				
				<wButton 
					text="注 册"
					:rotate="isRotate" 
					@click.native="submit()"
				></wButton>
			
			<!-- 底部信息 -->

		</view>
	</view>
</template>

<script>
	var api = require('../../common/api.js')
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	
	export default {
	
		data() {
			return {
				//logo图片 base64
				logoImage: '',

				showAgree:true, //协议是否选择
				isRotate: false, //是否加载旋转
				username: "",
				password: "",
				verification_code: "",
				send: "获取验证码",
				count: 0,
				timer: null
			}
		},
		components:{
			wInput,
			wButton,
		},
		mounted() {
			_this= this;
		},
		methods: {
			goLogin: function() {
					uni.navigateBack({
						delta: 1
					});
				},
				//注册
				submit: function() {
					if (this.account == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入手机号或邮箱'
						});
						return;
					}
					if (this.verification_code == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入验证码'
						});
						return;
					}
					api.post({
						url: 'user/public/register',
						data: {
							username: this.username,
							password: this.password,
							verification_code: this.verification_code
						},
						success: data => {
							if (data.code == 1) {
								uni.showToast({
									title: data.msg,
									icon: "none",
									duration: 1000
								});
								setTimeout(() => {
									uni.navigateTo({
										url:'login'
									});
								}, 1000);
							}
							if (data.code == 0) {
								uni.showToast({
									title: data.msg,
									icon: "none",
									duration: 2000
								});
							}
							console.log('注册成功')
						}
					});
				},
				//发送验证码
				getsmscode: function() {
					if (this.username == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入手机号或邮箱'
						});
						return;
					};
					console.log("获取验证码")
					uni.showToast({
					    icon: 'none',
						position: 'bottom',
					    title: '模拟倒计时触发'
					});
					
					setTimeout(function(){
						_this.$refs.runCode.$emit('runCode',0); //假装模拟下需要 终止倒计时
						uni.showToast({
						    icon: 'none',
							position: 'bottom',
						    title: '模拟倒计时终止'
						});
					},10000)
					if (!this.timer) {
						api.post({
							url: 'user/verification_code/send',
							data: {
								username: this.username
							},
							success: data => {
								//console.log(data);
								if (data.code == 1) {
									this.count = 5;
									this.send = "重新获取"
									this.timer = setInterval(() => {
										if (this.count > 0 && this.count <= 5) {
											this.count--;
										} else {
											clearInterval(this.timer);
											this.timer = null;
										}
									}, 1000)
									uni.showToast({
										title: data.msg,
										icon: "none",
										duration: 3000
									});
								}
								if (data.code == 0) {
									uni.showToast({
										title: data.msg,
										icon: "none",
										duration: 3000
									});
								}
							}
						})
					}
				}
			}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>